//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';

//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';

//创建并暴露一个路由器
const router = new VueRouter({
    mode:'history',//开启路由器的工作模式，只能是history或者hash这两种中的一种(默认值是hash)
    //一组路由
    routes:[
        {
            path:"/about",
            component:About,
            meta:{
                title:"关于"
            },
            children:[//配置子路由(也就是路由的嵌套)
                {
                    path:'news',
                    component:News,
                    meta:{
                        title:"新闻"
                    }
                },
                {
                    path:'message',
                    component:Message,
                    meta:{
                        title:"消息"
                    }
                }
            ]
        },
        {
            path:"/home",//路由的路径
            component:Home,//要跳转的组件
            children:[//配置子路由(也就是路由的嵌套)
                {
                    path:'news',
                    component:News,
                    meta:{//配置路由的元信息
                        isAuth: true,
                        title:"新闻"
                    }
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传递给Detail组件
                            //props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            //props:true

                            //props的三种写法，值为函数
                            // 路由的props配置
                            // 作用:让路由组件更方便的收到参教
                            // props($route){
                            //     return {
                            //         id:$route.query.id,
                            //         title:$route.query.title
                            //     }
                            // }
                            meta:{
                                isAuth:true,//是否需要权限校验
                                title:"详情"
                            }
                        }
                    ],
                    meta:{
                        title:"消息"    
                    }
                }
            ],
            meta:{
                title:"主页"
            }
        }
    ]
});

//全局前置路由守卫--->初始化的时候被调用、每次路由切换前被调用
router.beforeEach((to,from,next)=>{
    if (to.meta.isAuth) {//判断一下是否需要限权
        if (localStorage.getItem("school")!='atguigu') {
            next();//放行
        }else{
            alert("学校名不对没有权限");
        }
    }else{
        next();//放行，不然所有的路由请求都会被拦截
    }
});

//全局后置路由守卫--->初始化的时候被调用、每次路由切换前被调用
router.afterEach((to,from)=>{
    document.title=to.meta.title || "尚硅谷系统";
});


//暴露路由器
export default router;